<template>
  <div class="nav-wrap">
    <span></span>
    <div>
      <el-tooltip class="item" effect="dark" content="编辑版本描述" placement="bottom">
        <el-button size="small" icon="el-icon-chat-line-square" @click="dialogFormVisible = true"></el-button>
      </el-tooltip>


      <el-button size="small" @click="save">保存</el-button>
      <el-button size="small" type="primary" @click="startProcess">启用流程</el-button>
    </div>

    <el-dialog title="版本描述" :visible.sync="dialogFormVisible" width="35%">
      <el-form :model="form" label-width="100px">
        <el-form-item label="版本号：">
          <span>流程版本(V1)</span>
        </el-form-item>
        <el-form-item label="版本描述：">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.textarea">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogFormVisible = false">保 存</el-button>
      </div>
    </el-dialog>




  </div>
</template>

<script>
export default {
  data(){
    return{
      dialogFormVisible:false,
      form: {
        textarea:''
      }
    }
  },
  methods:{
    save(){
      this.$message({
        message: '流程保存成功',
        type: 'success'
      });
    },
    startProcess(){
       this.$confirm('启用后，新提交的数据将按此版本的流程流转', '确定要启用流程吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '启用成功!'
          });
        })
    }
  }
}
</script>

<style lang='scss' scoped>
.nav-wrap{
  height: 50px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 4px 5px #eee;
}
</style>